<%--
  Created by IntelliJ IDEA.
  User: gsb
  Date: 2019/11/22
  Time: 18:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>试题新建编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/attend/m/common.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/eleTree.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.iframe-transport.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.fileupload.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/ajaxupload.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jquery.form.min.js"></script>
    <script type="text/javascript" src="/js/common/fileupload.js"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <script src="/lib/layui/layui/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/js/baseCode/base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .layui-form-label{width:100px;}
        .layui-input-block{margin-left:130px;}
        .layui-disabled, .layui-disabled:hover{color: #797979 !important;}
        .layui-treeSelect .ztree li span.button.root_close{
            background-image: url(/css/zTreeStyle/img/zTreeStandard.png)!important;
            background-position: -74px -54px!important;
        }
        .layui-treeSelect .ztree li span.button.root_open{
            background-image: url(/css/zTreeStyle/img/zTreeStandard.png)!important;
            background-position: -92px -54px!important;
        }
    </style>
    <link rel="stylesheet" href="/css/zTreeStyle/zTreeStyle.css"/>
    <%--    <link rel="stylesheet" href="/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>--%>
    <%--    <script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.all.min.js"></script>--%>


<body>
<div>
    <!--
 自定义布局表单控件
 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form form" action="" lay-filter="qaForm">
                    <div id="view">
                        <div class="layui-form-item">
                            <div class="layui-inline" style="">
                                <label class="layui-form-label" style="">试题类型<span style="color: red">*</span></label>
                                <div class="layui-input-inline" style="width: 380px;">
                                    <select name="eqStatus" lay-filter="testType" lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="1">单选题</option>
                                        <option value="2">多选题</option>
                                        <option value="3">判断题</option>
                                        <option value="4">填空题</option>
                                        <option value="5">问答题</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline" style="">
                                <label class="layui-form-label" style="width:80px;">难度类型<span style="color: red">*</span></label>
                                <div class="layui-input-inline" style="width: 150px;">
                                    <select name="eqType" lay-verify="required">
                                        <option value="">请选择</option>
                                        <option value="1">简单</option>
                                        <option value="2">中等</option>
                                        <option value="3">困难</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">试题目录<span style="color: red">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" name="" id="tree" lay-filter="tree" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                <input type="hidden" name="sortId" id="sortId" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">问题<span style="color: red">*</span></label>
                            <div class="layui-input-block">
                                <textarea name="eqSubject" placeholder="请输入题干（字数限制在500字以内）" max="500" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">试题图片</label>
                            <div class="layui-input-block" style="position: relative">
                                <div id="Attachment" ></div>
                                <input type="hidden" name="attachmentId" autocomplete="off" class="layui-input">
                                <input type="hidden" name="attachmentName" autocomplete="off" class="layui-input">
                                <button id="uploadimg" type="button" class="layui-btn">上传</button>
                                <input type="file" multiple="multiple" name="file"  id="uploadinputimg"  class="w-icon5" style="position: absolute;opacity: 0;width: 95px;left:0px;height:40px;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">试题答案<span style="color: red">*</span></label>
                            <div class="layui-input-block answer" style="overflow: hidden">
                                <div class="questionCon" style="margin-left: 3px;"></div>
                                <button type="button" dataType="" style="margin-top: 5px;" class="layui-btn layui-btn-sm layui-btn-primary addChoose">
                                    <i class="layui-icon">&#xe608;</i> 添加选项
                                </button>
                            </div>
                            <div class="layui-input-block answerIpt" style="display: none">
                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入试题答案" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-block answerText" style="display: none">
                                <textarea name="desc" placeholder="请输入试题答案"  class="layui-textarea"></textarea>
                            </div>
                            <div class="layui-input-block answerPanduan" style="display: none">
                                <input type="radio" name="panduan" value="0" title="对" checked>
                                <input type="radio" name="panduan" value="1" title="错" >
                            </div>

                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">解析</label>
                            <div class="layui-input-block">
                                <textarea name="analysis" placeholder="请输入答案解析（字数限制在500字以内）" max="500" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn save"  lay-filter="form-qaForm-new">保存并新增</button>
                            <button type="button" class="layui-btn save"  lay-filter="form-qaForm">保存</button>
                            <button type="button" class="layui-btn cancleBtn"   >取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var type = $.GetRequest().type;
        var sortId = $.GetRequest().sortId;
        var id = $.GetRequest().id;
        var arr=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R'];
        var zmIndex=0;
        layui.use(['form','layer','treeSelect'],function(){
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                treeSelect = layui.treeSelect;
            form.render();

            //下拉樹獲取
            function treeSelects(treeId,id){
                treeSelect.render({
                    elem: treeId,     // 选择器
                    data: '/tbExamList/selectAllTree?sortId=0',  // 数据
                    type: 'get',      // 异步加载方式：get/post，默认get
                    placeholder: '请选择',   // 占位符
                    search: true,  // 是否开启搜索功能：true/false，默认false
                    style: {   // 一些可定制的样式
                        folder: {enable: true},
                        line: {enable: true}
                    },
                    click: function(d){     // 点击回调
                        $('input[name="sortId"]').val(d.current.id);
                        form.render()
                    },
                    // 加载完成后的回调函数
                    success: function (d) {
                        if(id!=''&&id!=undefined){
                            var treeId = $('.layui-treeSelect-body').attr('id')
                            treeSelect.checkNode('#tree',treeId,id);
                        }
                        form.render();
                    }
                });
            }



            //附件上传
            $('#uploadinputimg').click(function(){
                $('.form').attr('action','/upload?module=exaQuestions')
                fileuploadFn('#uploadinputimg',$('#Attachment'));
            })
            //附件删除
            $('#Attachment').on('click','.deImgs',function(){
                var data=$(this).parents('.dech').attr('deUrl');
                var dome=$(this).parents('.dech');
                deleteChatment(data,dome);
            })

            //监听试题类型选择
            form.on('select(testType)', function(data){
                $('.questionCon').html('')
                zmIndex=0;
                switch (data.value) {
                    case '1':
                        $('.answerIpt').hide();
                        $('.answer').show();
                        $('.answerPanduan').hide();
                        $('.answerText').hide();
                        $('.addChoose').attr('dataType','single');
                        break;
                    case '2':
                        $('.answerIpt').hide();
                        $('.answer').show();
                        $('.answerPanduan').hide();
                        $('.answerText').hide();
                        $('.addChoose').attr('dataType','multiple');
                        break;
                    case '4':
                        $('.answerIpt').show();
                        $('.answer').hide();
                        $('.answerPanduan').hide();
                        $('.answerText').hide();
                        break;
                    case '3':
                        $('.answerIpt').hide();
                        $('.answer').hide();
                        $('.answerPanduan').show();
                        $('.answerText').hide();
                        break;
                    case '5':
                        $('.answerIpt').hide();
                        $('.answer').hide();
                        $('.answerPanduan').hide();
                        $('.answerText').show();
                        break;
                    case '':
                        $('.answerIpt').hide();
                        $('.answer').show();
                        $('.answerPanduan').hide();
                        $('.answerText').hide();
                        $('.addChoose').attr('dataType','');
                        break;
                }
            });

            //点击添加选项
            $('.addChoose').click(function(){
                if($(this).attr('dataType')=='single'){

                    var  str = ' <div class="layui-form-item answerList" style="margin-bottom:0px;">\n' +
                        '                                <div class="layui-inline" style="width: 100%;">\n' +
                        '                                    <div class="layui-input-inline" style="width: 30px;">\n' +
                        '                                        <input type="radio" name="" value="'+arr[zmIndex]+'" title="">\n' +
                        '                                    </div>\n' +
                        '                                    <div class="layui-input-inline" style="width: 50%;">\n' +
                        '                                        <input type="text"  name="" placeholder="" autocomplete="off" class="layui-input options">\n' +
                        '                                    </div>\n' +
                        '                                    <div class="layui-input-inline" style="">\n' +
                        '                                        <button type="button" style="margin-top: 5px;" class="layui-btn layui-btn-primary layui-btn-sm delAnswer">\n' +
                        '                                            <i class="layui-icon">&#xe640;</i>\n' +
                        '                                        </button>\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                            </div>'
                    zmIndex++;
                }else if($(this).attr('dataType')=='multiple'){
                    var  str = ' <div class="layui-form-item answerList" style="margin-bottom:0px;">\n' +
                        '                                <div class="layui-inline" style="width: 100%;">\n' +
                        '                                    <div class="layui-input-inline" style="width: 30px;">\n' +
                        '                                        <input type="checkbox" name="" value="'+arr[zmIndex]+'" title="">\n' +
                        '                                    </div>\n' +
                        '                                    <div class="layui-input-inline" style="width: 50%;">\n' +
                        '                                        <input type="text" name="" placeholder="" autocomplete="off" class="layui-input options">\n' +
                        '                                    </div>\n' +
                        '                                    <div class="layui-input-inline" style="">\n' +
                        '                                        <button type="button" style="margin-top: 5px;" class="layui-btn layui-btn-primary layui-btn-sm delAnswer">\n' +
                        '                                            <i class="layui-icon">&#xe640;</i>\n' +
                        '                                        </button>\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                            </div>';
                    zmIndex++;
                }else if($(this).attr('dataType')==''){
                    layer.msg('请选择试题类型', {
                        icon: 6,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });
                    return false;
                }
                $('.questionCon').append(str)
                form.render();
            })
            //删除试题答案选项
            $('.form').on('click','.delAnswer',function(){
                $(this).parents('.answerList').remove();
            })

            //获取详情
            if(id!=''&&id!=undefined){

                $.ajax({
                    url:'/exaQuestions/selectById',
                    data:{eqId:id},
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        var data = res.object;
                        $('[name="eqStatus"]').val(data.eqStatus)
                        $('[name="eqType"]').val(data.eqType)
                        $('[name="eqSubject"]').val(data.eqSubject)
                        $('[name="analysis"]').val(data.analysis)
                        $('[name="sortId"]').val(data.sortId)
                        form.render('select')
                        treeSelects('#tree',data.sortId)
                        //获取附件
                        var str=''
                        if(data.attachment!=''&&data.attachment!=undefined){
                            str+='<div class="dech" deUrl="'+data.attachment.attUrl+'"><a href="/download?'+data.attachment.attUrl+'" NAME="'+data.attachment.attachName+'*"><img style="width:16px;" src="/img/file/cabinet@.png"/>'+data.attachment.attachName+'</a><img class="deImgs" style="margin-left:5px;cursor: pointer;" src="/img/file/icon_deletecha_03.png"/><input type="hidden" class="inHidden" value="'+data.attachment.aid+'@'+data.attachment.ym+'_'+data.attachment.attachId+',"></div>';
                        }else{
                            str='';
                        }
                        $('#Attachment').html(str)

                        //获取试题
                        if(data.eqStatus==1){ //单选
                            $('.answerIpt').hide();
                            $('.answer').show();
                            $('.answerPanduan').hide();
                            $('.answerText').hide();
                            $('.addChoose').attr('dataType','single')
                            if(data.option!=''){
                                var optionArr = data.option.split(';')
                                var radioStr=''
                                for(var i=0;i<optionArr.length;i++){
                                    if(optionArr[i]!=''){
                                        radioStr+=' <div class="layui-form-item answerList" style="margin-bottom:0px;">\n' +
                                            '                                <div class="layui-inline" style="width: 100%;">\n' +
                                            '                                    <div class="layui-input-inline" style="width: 30px;">\n' +
                                            '                                        <input type="radio" name="" value="'+arr[zmIndex]+'" title="">\n' +
                                            '                                    </div>\n' +
                                            '                                    <div class="layui-input-inline" style="width: 50%;">\n' +
                                            '                                        <input type="text" value="'+optionArr[i].split('.')[1]+'"  name="" placeholder="" autocomplete="off" class="layui-input options">\n' +
                                            '                                    </div>\n' +
                                            '                                    <div class="layui-input-inline" style="">\n' +
                                            '                                        <button type="button" style="margin-top: 5px;" class="layui-btn layui-btn-primary layui-btn-sm delAnswer">\n' +
                                            '                                            <i class="layui-icon">&#xe640;</i>\n' +
                                            '                                        </button>\n' +
                                            '                                    </div>\n' +
                                            '                                </div>\n' +
                                            '                            </div>'
                                        zmIndex++;
                                    }

                                }
                                $('.questionCon').html(radioStr)
                                $('.questionCon input[type="radio"][value="'+data.answer+'"]').prop('checked','checked')
                            }
                        }else if(data.eqStatus==2){ //多选
                            $('.answerIpt').hide();
                            $('.answer').show();
                            $('.answerPanduan').hide();
                            $('.answerText').hide();
                            $('.addChoose').attr('dataType','multiple')
                            if(data.option!=''){
                                var optionArr = data.option.split(';')
                                var checkboxStr=''
                                for(var i=0;i<optionArr.length;i++){
                                    if(optionArr[i]!=''){
                                        checkboxStr+=' <div class="layui-form-item answerList" style="margin-bottom:0px;">\n' +
                                            '                                <div class="layui-inline" style="width: 100%;">\n' +
                                            '                                    <div class="layui-input-inline" style="width: 30px;">\n' +
                                            '                                        <input type="checkbox" name="" value="'+arr[zmIndex]+'" title="">\n' +
                                            '                                    </div>\n' +
                                            '                                    <div class="layui-input-inline" style="width: 50%;">\n' +
                                            '                                        <input type="text" name="" value="'+optionArr[i].split('.')[1]+'" placeholder="" autocomplete="off" class="layui-input options">\n' +
                                            '                                    </div>\n' +
                                            '                                    <div class="layui-input-inline" style="">\n' +
                                            '                                        <button type="button" style="margin-top: 5px;" class="layui-btn layui-btn-primary layui-btn-sm delAnswer">\n' +
                                            '                                            <i class="layui-icon">&#xe640;</i>\n' +
                                            '                                        </button>\n' +
                                            '                                    </div>\n' +
                                            '                                </div>\n' +
                                            '                            </div>';
                                        zmIndex++;
                                    }

                                }
                                $('.questionCon').html(checkboxStr)
                                if(data.answer!=''&&data.answer.indexOf(',')>=0){
                                    var answerArr = data.answer.split(',');
                                    for(var j=0;j<answerArr.length;j++){
                                        if(answerArr[j]!=''){
                                            $('.questionCon input[type="checkbox"][value="'+answerArr[j]+'"]').prop('checked','checked')
                                        }
                                    }
                                }
                            }
                        }else if(data.eqStatus==4){ //判断题
                            $('.answerIpt').show();
                            $('.answer').hide();
                            $('.answerPanduan').hide();
                            $('.answerText').hide();
                            $('.answerIpt input').val(data.answer)
                        }else if(data.eqStatus==3){ //填空题
                            $('.answerIpt').hide();
                            $('.answer').hide();
                            $('.answerPanduan').show();
                            $('.answerText').hide();
                            $('.answerPanduan input[type="radio"][value="'+data.answer+'"]').prop('checked','checked')
                        }else if(data.eqStatus==5){ //问答
                            $('.answerIpt').hide();
                            $('.answer').hide();
                            $('.answerPanduan').hide();
                            $('.answerText').show();
                            $('.answerText textarea').val(data.answer)
                        }
                        form.render();
                    }
                })
            }else{
                treeSelects('#tree','')
            }

            //监听提交
            $('.save').click(function(){
                if($('[name="eqStatus"]').val()==''){
                    layer.msg('请选择试题类型',{icon:2});
                    return false;
                }
                if($('[name="eqType"]').val()==''){
                    layer.msg('请选择试题难度',{icon:2});
                    return false;
                }
                if($('[name="sortId"]').val()==''){
                    layer.msg('请选择试题目录',{icon:2});
                    return false;
                }
                if($('[name="eqSubject"]').val()==''){
                    layer.msg('请输入题干',{icon:2});
                    return false;
                }
                if($('[name="eqStatus"]').val()==''){
                    layer.msg('请选择试题类型',{icon:2});
                    return false;
                }
                var filter = $(this).attr("lay-filter");
                if(type==0){
                    var url = '/exaQuestions/addQuestion'
                }else{
                    var url = '/exaQuestions/updateQuestion'
                }
                var index = parent.layer.getFrameIndex(window.name);
                //获取试题选项和答案
                var option = '';
                var answer = ''
                if($('[name="eqStatus"]').val()==1){
                    for(var i=0;i<$('.answerList').length;i++){
                        option += $('.answerList').eq(i).find('input[type="radio"]').val()+'.'+$('.answerList').eq(i).find('.options').val()+';'
                    }
                    answer = $('.answerList').find('input[type="radio"]:checked').val()
                }else if($('[name="eqStatus"]').val()==2){
                    for(var i=0;i<$('.answerList').length;i++){
                        option += $('.answerList').eq(i).find('input[type="checkbox"]').val()+'.'+$('.answerList').eq(i).find('.options').val()+';'
                    }
                    for(var j=0;j<$('input[type="checkbox"]:checked').length;j++){
                        answer += $('input[type="checkbox"]:checked').eq(j).val()+','
                    }
                }else if($('[name="eqStatus"]').val()==4){
                    option =''
                    answer = $('.answerIpt input[type="text"]').val()
                }else if($('[name="eqStatus"]').val()==3){
                    option =''
                    answer = $('.answerPanduan input[type="radio"]:checked').val()
                }else if($('[name="eqStatus"]').val()==5){
                    option =''
                    answer = $('.answerText textarea').val()
                }

                //获取图片id和name
                var attachmentId='';
                var attachmentName='';
                for(var i=0;i<$('#Attachment .inHidden').length;i++){
                    attachmentId += $('#Attachment .inHidden').eq(i).val();
                }
                for(var i=0;i<$('#Attachment .inHidden').length;i++){
                    attachmentName += $('#Attachment a').eq(i).attr('NAME');
                }
                if($('[name="eqStatus"]').val()==1||$('[name="eqStatus"]').val()==2){
                    if(option==''){
                        layer.msg('请添加选项',{icon:2});
                        return false;
                    }
                }
                if(answer==''){
                    layer.msg('请填入答案',{icon:2});
                    return false;
                }
                var data = {
                    eqStatus:$('[name="eqStatus"]').val(),
                    eqType:$('[name="eqType"]').val(),
                    eqSubject:$('[name="eqSubject"]').val(),
                    sortId:$('[name="sortId"]').val(),
                    analysis:$('[name="analysis"]').val(),
                    option:option,
                    answer:answer,
                    attachmentId:attachmentId,
                    attachmentName:attachmentName
                }
                if(id!=''&&id!=undefined){
                    data.eqId = id;
                }
                $.ajax({
                    url: url,
                    data:data,
                    success: function (data) {
                        if(data.code==0){
                            layer.msg('新建成功', {icon: 1});
                            if(filter == 'form-qaForm-new'){
                                window.location.href='/tbExamList/create?type='+type+'&sortId='+sortId+'&id=';
                            }else{
                                parent.layer.close(index);
                                parent.location.reload();
                            }
                        }else{
                            var errorMsg  =  '请添加选项';
                            layer.msg(errorMsg, {icon: 2});
                        }
                    },
                    // error:function(xhr,status,error){
                    //     parent.layer.close(index);
                    //     var errorMsg  =  '保存失败';
                    //     layer.msg(errorMsg, {icon: 2});
                    // }
                });
            })

            //监听取消
            $('.cancleBtn').click(function(){
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            })

            //删除附件
            function deleteChatment(data,element){

                layer.confirm('确定要删除吗？', {
                    btn: ['确定','取消'], //按钮
                    title:"删除附件"
                }, function(){
                    //确定删除，调接口
                    $.ajax({
                        type:'get',
                        url:'/delete',
                        dataType:'json',
                        data:data,
                        success:function(res){
                            if(res.flag == true){
                                layer.msg('删除成功', { icon:6});
                                element.remove();
                            }else{
                                layer.msg('删除失败', { icon:6});
                            }
                        }
                    });

                }, function(){
                    layer.closeAll();
                });
            }


        });

    </script>
</div>
<style>
    .layui-form-checkbox i{
        border-left: 1px solid #d2d2d2;
    }
    .active{
        display: block;
    }
    .nonactive{
        display: none;
    }
</style>
</body>
</html>
